Process

Component Overview

Variants & States

A process component communicates to the user the progress of a particular process.

Sales Path CoachprototypeNot Compatible with S1 Mobile

Preview

Code

<div class="slds-grid">
  <div class="slds-tabs--path" role="application">
    <ul class="slds-tabs--path__nav" role="tablist">
      <li class="slds-tabs--path__item slds-is-complete" role="presentation">
        <a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="#void" aria-live="assertive">
          <span class="slds-tabs--path__stage">
            <svg aria-hidden="true" class="slds-icon slds-icon--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>
            <span class="slds-assistive-text">Stage Complete</span>
          </span>
          <span class="slds-tabs--path__title">Contacted</span>
        </a>
      </li>
      <li class="slds-tabs--path__item slds-is-complete" role="presentation">
        <a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="#void" aria-live="assertive">
          <span class="slds-tabs--path__stage">
            <svg aria-hidden="true" class="slds-icon slds-icon--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>
            <span class="slds-assistive-text">Stage Complete</span>
          </span>
          <span class="slds-tabs--path__title">Open</span>
        </a>
      </li>
      <li class="slds-tabs--path__item slds-is-current" role="presentation">
        <a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="#void" aria-live="assertive">
          <span class="slds-tabs--path__stage">
            <svg aria-hidden="true" class="slds-icon slds-icon--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>
          </span>
          <span class="slds-tabs--path__title">Unqualified</span>
        </a>
      </li>
      <li class="slds-tabs--path__item slds-is-incomplete" role="presentation">
        <a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="#void" aria-live="assertive">
          <span class="slds-tabs--path__stage">
            <svg aria-hidden="true" class="slds-icon slds-icon--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>
          </span>
          <span class="slds-tabs--path__title">Nurturing</span>
        </a>
      </li>
      <li class="slds-tabs--path__item slds-is-incomplete" role="presentation">
        <a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="#void" aria-live="assertive">
          <span class="slds-tabs--path__stage">
            <svg aria-hidden="true" class="slds-icon slds-icon--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>
          </span>
          <span class="slds-tabs--path__title">Closed</span>
        </a>
      </li>
    </ul>
  </div>
  <button class="slds-button slds-button--brand slds-button--small button--border-filled slds-path__mark-complete slds-no-flex slds-m-horizontal--small">
    <svg aria-hidden="true" class="slds-button__icon slds-button__icon--left">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
    </svg>Mark Status as Complete</button>
</div>

Open coaching content section.

Wizarddev ready

Preview

Code

<div class="slds-wizard" role="navigation">
  <ol class="slds-wizard__list">
    <li class="slds-wizard__item slds-is-active">
      <a href="#void" class="slds-wizard__link">
        <span class="slds-wizard__marker"></span>
        <span class="slds-wizard__label slds-text-heading--label slds-truncate">Navigation</span>
      </a>
    </li>
    <li class="slds-wizard__item slds-is-active">
      <a href="#void" class="slds-wizard__link">
        <span class="slds-wizard__marker"></span>
        <span class="slds-wizard__label slds-text-heading--label slds-truncate">Actions</span>
      </a>
    </li>
    <li class="slds-wizard__item slds-is-active">
      <a href="#void" class="slds-wizard__link">
        <span class="slds-wizard__marker"></span>
        <span class="slds-wizard__label slds-text-heading--label slds-truncate">Compact Layout</span>
      </a>
    </li>
    <li class="slds-wizard__item">
      <a href="#void" class="slds-wizard__link">
        <span class="slds-wizard__marker"></span>
        <span class="slds-wizard__label slds-text-heading--label slds-truncate">Review</span>
      </a>
    </li>
    <li class="slds-wizard__item">
      <a href="#void" class="slds-wizard__link">
        <span class="slds-wizard__marker"></span>
        <span class="slds-wizard__label slds-text-heading--label slds-truncate">Invite</span>
      </a>
    </li>
  </ol>
  <span class="slds-wizard__progress">
    <span class="slds-wizard__progress-bar" style="width:50%;"></span>
  </span>
</div>

The process wizard communicates to the user which step of a process they may be on. The length of the progress bar can be changed by modifying the inline width style on .slds-wizard__progress-bar with JavaScript. The .slds-wizard__progress-bar accepts a range from 0% to 100%.

When a step becomes active, the .slds-wizard__item should get the class .slds-is-active. This class should be applied through JavaScript. When the step is completed, the .slds-is-active class should persist on .slds-wizard__item. This will keep the step indicator blue to show the step has been completed.

Component Overview

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-tabs--path
Applied to:

<div>

Outcome:

Initializes default tabset

Required:

Required

Comments:

--

.slds-tabs--path__nav
Applied to:

<ul>

Outcome:

Creates the container for the default tabs

Required:

Required

Comments:

--

.slds-tabs--path__item
Applied to:

<li>

Outcome:

Styles each list item as a single tab

Required:

Required

Comments:

--

.slds-tabs--path__link
Applied to:

<a>

Outcome:

Styles each <a> element in the <li>

Required:

Required

Comments:

--

.slds-tabs--path__content
Applied to:

<div>

Outcome:

Styles each tab content wrapper

Required:

Required

Comments:

--

.slds-tabs--path__stage
Applied to:

<span>

Outcome:

Contains the check mark when the stage is completed

Required:

Required

Comments:

This class is only required in the sales path tabs and is contained inside the .slds-tabs--path__link

.slds-tabs--path__title
Applied to:

<span>

Outcome:

Contains the name of the stage

Required:

Required

Comments:

This class is only required in the sales path tabs and is contained inside the .slds-tabs--path__link

.slds-is-complete
Applied to:

.slds-tabs--path__item

Outcome:

Creates the completed stage of the sales path

Required:

No, optional element or modifier

Comments:

--

.slds-is-current
Applied to:

.slds-tabs--path__item

Outcome:

Creates the current stage of the sales path

Required:

No, optional element or modifier

Comments:

--

.slds-is-incomplete
Applied to:

.slds-tabs--path__item

Outcome:

Creates the incomplete stage of the sales path

Required:

No, optional element or modifier

Comments:

--

.slds-is-active
Applied to:

.slds-tabs--path__item

Outcome:

Creates the active stage of the sales path

Required:

No, optional element or modifier

Comments:

This class must be placed on the item programatically when the guidance section is used

.slds-wizard
Applied to:

<div>

Outcome:

Initializes popover

Required:

Required

Comments:

--

.slds-wizard__list
Applied to:

<ol>

Outcome:

An ordered list containing steps of a process

Required:

Required

Comments:

--

.slds-wizard__item
Applied to:

<li>

Outcome:

A list item for each step of the process

Required:

Required

Comments:

--

.slds-wizard__link
Applied to:

<a>

Outcome:

Hyperlink of the list item, user can jump between steps

Required:

Required

Comments:

--

.slds-wizard__marker
Applied to:

<span>

Outcome:

Dot indicator for each step

Required:

Required

Comments:

--

.slds-wizard__label
Applied to:

<span class="slds-text-heading--label>

Outcome:

Text description for each step

Required:

Required

Comments:

--

.slds-wizard__progress
Applied to:

<span>

Outcome:

Container for progress bar

Required:

Required

Comments:

<span> sits outside of <ol>

.slds-wizard__progress-bar
Applied to:

<span>

Outcome:

Bar showcasing which step of the process a user is on

Required:

Required

Comments:

Inline width styles should be modified with JavaScript

.slds-is-active
Applied to:

slds-wizard__item

Outcome:

Stateful class that turns dot indicator and progress bar blue

Required:

Required

Comments:

Class should be applied thought JavaScript